<template>
  <el-drawer
    class="bi-drawer"
    :visible.sync="drawerVisible"
    :with-header="widthHeader"
    direction="rtl"
    :size="drawerSize"
    :title="drawerTitle"
    destroy-on-close
    v-bind="this.$attrs"
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <div style="position: relative; height: 100%">
      <component :is="componentName" ref="childMethods" v-bind="$attrs" :drawer-title="drawerTitle" @ok="handleOK" @cancel="handleCancel" />
    </div>
  </el-drawer>
</template>
<script>
// import Vue from 'vue'
import Default from './Default.vue'
export default {
  components: { Default },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    component: {
      type: Object,
      default: () => {
        return {}
      }
    },
    drawerSize: {
      type: String,
      default: '80%'
    },
    drawerTitle: {
      type: String,
      default: ''
    },
    widthHeader: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // componentName: () => import('./Default.vue'),
      componentName: 'Default'
    }
  },
  computed: {
    drawerVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },

  created() {
    const componentName = 'DrawerComponent_' + new Date().getTime() + '_' + Math.random()
    this.$options.components[componentName] = this.component
    this.$nextTick(() => {
      this.componentName = componentName
    })
  },
  methods: {
    open() {
      this.$refs.childMethods && this.$refs.childMethods.handlerOpen && this.$refs.childMethods.handlerOpen()
    },
    opened() {
      this.$refs.childMethods && this.$refs.childMethods.handlerOpened && this.$refs.childMethods.handlerOpened()
    },
    close() {
      this.$refs.childMethods && this.$refs.childMethods.handlerClose && this.$refs.childMethods.handlerClose()
    },
    closed() {
      this.$refs.childMethods && this.$refs.childMethods.handlerClosed && this.$refs.childMethods.handlerClosed()
    },
    handleOK(row) {
      this.$emit('ok', row)
      this.drawerVisible = false
    },
    handleCancel(row) {
      this.drawerVisible = false
      this.$emit('cancel', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.bi-drawer {
  ::v-deep.el-drawer__header {
    padding: 0 10px;
    line-height: 58px;
    height: 58px;
    // padding-bottom: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    // border: 1px rgba(0, 0, 0, 0.06) solid;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    .el-dialog__close {
      color: rgba(0, 0, 0, 0.45);
      &:hover {
        background: none !important;
        color: rgba(0, 0, 0, 0.25) !important;
      }
    }
  }
  ::v-deep.el-drawer__body {
    max-height: calc(100% - 58px);
    // padding: 10px;
  }
}
</style>
